<template>
  <div class="handleSection">
    <!-- <div class="main-container" v-if="!isHideRight"> -->
    <div class="title-section"><img src="../../../assets/vf_images/move.png" /><span>模型操作</span></div>
    <div class="border-section">
      <div class="t_line_box">
        <i class="t_l_line"></i>
        <i class="l_t_line"></i>
      </div>
      <div class="t_line_box">
        <i class="t_r_line"></i>
        <i class="r_t_line"></i>
      </div>
      <div class="t_line_box">
        <i class="l_b_line"></i>
        <i class="b_l_line"></i>
      </div>
      <div class="t_line_box">
        <i class="r_b_line"></i>
        <i class="b_r_line"></i>
      </div>
    </div>
    <div class="content-section">
      <div class="scale-section">
        <div class="min-title">
          <img src="../../../assets/vf_images/scale.png">
          <div class="lable">缩放</div>
        </div>
        <div class="scale-block">
          <div class="label">倍数:</div>
          <div class="input-number">
            <el-input-number v-model="scaleNum" :step="0.1" size="small" @change="handleScale"></el-input-number>
          </div>
        </div>
      </div>
      <div class="rotate-section">
        <div class="min-title">
          <img src="../../../assets/vf_images/rotate.png">
          <div class="lable">旋转</div>
        </div>
        <div class="rotate-block">
          <div class="min-block">
            <div class="label">x轴:</div>
            <div class="slide">
              <el-slider v-model="rotateX" :step="1" show-input input-size="mini" @input="handleRotateX">
              </el-slider>
            </div>
          </div>
          <div class="min-block">
            <div class="label">y轴:</div>
            <div class="slide">
              <el-slider v-model="rotateY" :step="1" show-input input-size="mini" @input="handleRotateY">
              </el-slider>
            </div>
          </div>
          <div class="min-block">
            <div class="label">z轴:</div>
            <div class="slide">
              <el-slider v-model="rotateZ" :step="1" show-input input-size="mini" @input="handleRotateZ">
              </el-slider>
            </div>
          </div>
        </div>

      </div>
      <div class="translate-section">
        <div class="min-title">
          <img src="../../../assets/vf_images/translate.png">
          <div class="lable">平移</div>
        </div>
        <div class="translate-block">
          <div class="label">平移功能:</div>
          <div class="switch">
            <el-switch
              v-model="isTranslate"
              active-color="#4788FB"
              inactive-color="#E8EAED"
              @change="handleTranslate">
            </el-switch>
          </div>
        </div>

      </div>
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
  export default {
    name: 'handleSection',
    components: {
    },
    props: {
    },
    computed: {

    },
    watch: {
    },
    data() {
      return {
        isHideRight: false,
        scaleNum: 1,
        rotateX:0,
        rotateY:0,
        rotateZ:0,
        isTranslate:false,
        isShow:false
      }
    },
    created() {},
    mounted: function() {

    },
    methods: {
      handleScale:function(){/* 缩放 */
        // console.log("缩放倍数",this.scaleNum)
        this.$emit("handleScale",this.scaleNum)
      },
      handleRotateX:function(){/* 绕X轴旋转 */
        // console.log("x轴",this.rotateX)
        this.$emit("handleRotateX",this.rotateX)
      },
      handleRotateY:function(){/* 绕Y轴旋转 */
        // console.log("y轴",this.rotateY)
        this.$emit("handleRotateY",this.rotateY)
      },
      handleRotateZ:function(){/* 绕Z轴旋转 */
        // console.log("z轴",this.rotateZ)
        this.$emit("handleRotateZ",this.rotateZ)
      },
      handleTranslate:function(){/* 开启平移功能 */
        // console.log("平移功能",this.isTranslate)
        this.$emit("handleTranslate",this.isTranslate)
      }

    },
  }
</script>

<style lang="scss">
  .handleSection {
    width: 32rem;
    height: 44rem;
    border: 1px dotted #1F3D75;
    box-sizing: border-box;
    position: relative;
    margin-top: 3rem;
    margin-right: 2rem;
    background-color: rgba(14, 30, 52, 0.2);
    align-items: center;
    pointer-events: auto;

    .title-section {
      background-color: #1F3D75;
      border-radius: 1.8rem;
      position: absolute;
      height: 3.5rem;
      width: 60%;
      top: -1.8rem;
      color: rgba(255, 255, 255, 0.8);
      font-weight: bold;
      font-size: 1.5rem;
      left: 20%;
      line-height: 2rem;
      text-align: center;

      >img {
        height: 2.8rem;
        width: 2.8rem;
        margin-right: 1.5rem;
        position: relative;
        top: 0.4rem
      }

      >span {
        position: relative;
        bottom: 0.5rem;
      }
    }

    .border-section {
      .l_t_line {
        width: 5px;
        height: 24px;
        left: -3px;
        top: -3px;
      }

      .t_l_line {
        height: 5px;
        width: 26px;
        left: -3px;
        top: -3px;
      }

      .t_line_box {
        // position: absolute;
        width: 100%;
        height: 100%;
      }

      .t_line_box i {
        background-color: rgba(71, 136, 251, 0.8);
        box-shadow: 0px 0px 10px rgba(71, 136, 251, 0.8);
        position: absolute;
      }

      .t_r_line {
        height: 5px;
        width: 26px;
        right: -3px;
        top: -3px;
      }

      .t_title {
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 2.5em;
        line-height: 40px;
        color: #fff;
      }

      .r_t_line {
        width: 5px;
        height: 24px;
        right: -3px;
        top: -3px;
      }

      .l_b_line {
        width: 5px;
        height: 24px;
        left: -3px;
        bottom: -3px;
      }

      .b_l_line {
        height: 5px;
        width: 26px;
        left: -3px;
        bottom: -3px;
      }

      .r_b_line {
        width: 5px;
        height: 24px;
        right: -3px;
        bottom: -3px;
      }

      .b_r_line {
        height: 5px;
        width: 26px;
        right: -3px;
        bottom: -3px;
      }
    }

    .content-section {
      margin: 1rem 0rem;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .min-title {
        height: 2.5rem;
        width: 8rem;
        font-size: 1.1rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        // margin-left: 0.5rem;
        color: #fff;
        background-color: rgba(45, 92, 171, 0.6);
        // border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;

        >img {
          height: 1.8rem;
          width: 1.8rem;
          margin-right: 1rem;
        }

        .lable {
          margin-right: 0.8rem;
        }
      }

      .scale-section {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        height: 8rem;
        margin: 1rem 0.5rem;
        background-color: rgba(0, 0, 0, 0.2);
        border-bottom: 1px solid rgba(32, 74, 105, 0.3);
        border-top: 1px solid rgba(32, 74, 105, 0.3);

        .scale-block {
          display: flex;
          height: 3rem;
          flex-direction: row;
          color: #fff;
          font-size: 1rem;
          align-items: center;
          margin: 1rem 2rem;
          // margin-left: 8rem;

          .label {
            margin-right: 2rem;
          }

          .el-input-number.el-input-number--small {

            // height: 2rem;
            .el-input-number__decrease,
            .el-input-number__increase {
              background-color: rgba(71, 136, 251, 0.7);
              border-color: rgba(71, 136, 251, 0.7);
              color: #fff;
            }

            .el-icon-minus,
            .el-icon-plus {
              font-size: 1rem;
            }

            .el-input--small {
              .el-input__inner {
                background-color: rgba(0, 0, 0, 0.1);
                border-color: rgba(71, 136, 251, 0.7);
                color: #fff;
                font-size: 1rem;
              }
            }
          }
        }
      }

      .rotate-section {
        height: 20rem;
        margin: 1rem 0.5rem;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        background-color: rgba(14, 30, 52, 0.3);
        .rotate-block{
          display: flex;
          flex-direction: column;

          .min-block{
            display: flex;
            height: 3rem;
            flex-direction: row;
            color: #fff;
            font-size: 1rem;
            align-items: center;
            margin: 1rem 2rem;

            .label {
              margin-right: 2rem;
            }
            .slide{
              width: 22rem;
              .el-slider__runway{
                background-color: rgba(255, 255, 255, 0.5);
              }
            }
            .el-input-number.el-input-number--mini {

              // height: 2rem;
              .el-input-number__decrease,
              .el-input-number__increase {
                background-color: rgba(71, 136, 251, 0.7);
                border-color: rgba(71, 136, 251, 0.7);
                color: #fff;
              }

              .el-icon-minus,
              .el-icon-plus {
                font-size: 1rem;
              }

              .el-input--mini {
                .el-input__inner {
                  background-color: rgba(0, 0, 0, 0.1);
                  border-color: rgba(71, 136, 251, 0.7);
                  color: #fff;
                  font-size: 1rem;
                }
              }
            }
          }

        }
      }

      .translate-section {
        height: 8rem;
        margin: 1rem 0.5rem;
        background-color: rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        .translate-block{
          display: flex;
          height: 3rem;
          flex-direction: row;
          color: #fff;
          font-size: 1rem;
          align-items: center;
          margin: 1rem 2rem;

          .label {
            margin-right: 5rem;
          }
        }
      }
    }
  }
</style>
